<script lang="ts" setup>
import { ref } from 'vue';
import type { CardItem } from "../types/home"

const websites = ref<CardItem[]>([])

websites.value = [
  {
    name: "百度智能云",
    icon: "/src/assets/baidu.jpg",
    url: "https://cloud.baidu.com/"
  },
  {
    name: "阿里云",
    icon: "/src/assets/aliyun.png",
    url: "https://www.aliyun.com/",
  },
  {
    name: "element-plus",
    icon: "/src/assets/element-plus-logo.svg",
    url: "https://element-plus.org/zh-CN/",
  },
  {
    name: "移动云",
    icon: "/src/assets/ydyun.jpg",
    url: "https://ecloud.10086.cn/",
  },
  {
    name: "drone",
    icon: "/src/assets/drone.svg",
    url: "https://www.drone.io/",
  },
  {
    name: "drone1",
    icon: "/src/assets/drone.svg",
    url: "https://www.drone.io/",
  },
  {
    name: "drone2",
    icon: "/src/assets/drone.svg",
    url: "https://www.drone.io/",
  },
]
</script>


<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="4" v-for="item in websites" :key="item.name">
        <el-card shadow="hover">
          <a class="card" target="_blank" :href="item.url">
            <img :src="item.icon" class="image" :alt="item.url"/>
          </a>
        </el-card>
      </el-col>
  </el-row>
  </div>

</template>

<style scoped>
.card {
  display: flex;
}
.image {
  width: 50px;
}
</style>
